<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="models.BeanUsers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/mur.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var numUsers = 5;

$(document).ready(function(){
    $(".follow").unbind("click").click(function(event) {
    	$.post('UserController',{follow: $(this).attr('id')}, function(data){
        	$('#rightcolumn').load('ContentController');
    	}
    	);
    	
	});
    $(".unfollow").unbind("click").click(function(event) {
    	$.post('UserController',{unfollow: $(this).attr('id')}, function(data){
            $('#rightcolumn').load('ContentController');
    		}
    	);
	});
    $(".AddContact").unbind("click").click(function(event) {
    	$.post('UserController',{addContact: $(this).attr('id')}, function(data){
            $('#rightcolumn').load('ContentController');
    		}
    	);
	});
    $(".DeleteContact").unbind("click").click(function(event) {
    	$.post('UserController',{deleteContact: $(this).attr('id')},function(data){
    			$('#rightcolumn').load('ContentController');
    	}
    	);
	});
    
    $(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        	numUsers = numUsers + 5;
           $('#loadingUsers').fadeToggle("slow", "linear");
           $('#loadingUsers').delay(400).toggle( function () {
        	   $('#rightcolumn').load("ContentController", {numUsers:numUsers}, function(data){
              		
       			});
           		}
           );
        }
    });
    
});
</script>
<title>Users</title>
</head>
<body>
<% 
BeanUsers beanUsers = null;
if (request.getAttribute("beanUsers")!=null) {
	beanUsers = (BeanUsers)request.getAttribute("beanUsers");
}
else {
	beanUsers = new BeanUsers();
}
%>
 		<div id="missatge"><% if (request.getAttribute("message") != null) out.print(request.getAttribute("message")); %></div>
 		<div class="clear"></div>
       <!-- Begin Left Column -->
       <h2> Lista de usuarios: </h2>
	       <table id="tweetsTable">
				<%
				if(beanUsers.getUsers().size()>0) {
				for(int i = 0; i < beanUsers.getUsers().size(); i++) { %>
				<tr><td class="tdTweet">
				<div style="margin-left:10px">
					<div class="tweetImg">
					<% 
					String path = getServletContext().getRealPath("/etc/img");
					File f = new java.io.File(path + "/tweet_" + beanUsers.getUsers().get(i).getUser() + ".jpg");
					if(f.exists()) {%><img  src="./etc/img/tweet_<%=beanUsers.getUsers().get(i).getUser()%>.jpg"/><%} else{ %><img src="./etc/img/tweet_nopic.jpg"/>
<%} %></div>
					<div class="tweetDiv"><div class="inlineLinks" style="vertical-alight:center">
					<a href="HomeController?viewUser=<%=beanUsers.getUsers().get(i).getUser() %>">User: <%=beanUsers.getUsers().get(i).getUser() %></a>
					Nombre: <%=  beanUsers.getUsers().get(i).getName() %> | 
					<%if(!beanUsers.getUsers().get(i).getUser().equals(session.getAttribute("user"))){ %>
						<%if(beanUsers.getUsers().get(i).isFollowing()){ %>
							<a href="#" id="<%=beanUsers.getUsers().get(i).getUser() %>" class="unfollow">Unfollow</a>
						<%}else{ %>
							<a href="#" id="<%=beanUsers.getUsers().get(i).getUser() %>"  class="follow">Follow</a>
						<%}%> | <%
						if(beanUsers.getUsers().get(i).isContact()){%>
							<a href="#" id="<%=beanUsers.getUsers().get(i).getUser() %>" class="DeleteContact">Delete Contact</a>
						<%}else{%>
							<a href="#" id="<%=beanUsers.getUsers().get(i).getUser() %>" class="AddContact">Add Contact</a>						
						<%}
					}%>
					</div>
					</div>
					</div>
				</td></tr>
				<% } %>
				</table>
				<div style="height:100px">
				<div id="loadingUsers" style="width:100%; text-align:center; display:none"><h2>Cargando...</h2></div>
				</div>
				<% } else {%> 
				<h3 style="margin-left:10px;">No users found</h3>
				<% 
				}%>
			
       <!-- End Right Column -->
	   <div class="clear"></div>

</body>
</html>